<template>
  <div class="node-panel">
    <div class="node-item" @mousedown="openSelection()">
      <div class="node-item-icon selection"></div>
      <span class="node-label">选区</span>
    </div>
    <div class="node-item" @mousedown="addStartNode()">
      <div class="node-item-icon start"></div>
      <span class="node-label">开始节点</span>
    </div>
    <div class="node-item" @mousedown="addGeneralNode()">
      <div class="node-item-icon general"></div>
      <span class="node-label">普通节点</span>
    </div>
    <div class="node-item" @mousedown="addConditionNode()">
      <div class="node-item-icon condition"></div>
      <span class="node-label">条件节点</span>
    </div>
    <div class="node-item" @mousedown="addHtmlNode()">
      <div class="node-item-icon html"></div>
      <span class="node-label">Html节点</span>
    </div>
    <div class="node-item" @mousedown="addEndNode()">
      <div class="node-item-icon end"></div>
      <span class="node-label">结束节点</span>
    </div>
  </div>
</template>
<script setup>
import LogicFlow from "@logicflow/core";
import CustomRect from "../registerNode/CustomRect";
import CustomPolygon from "../registerNode/CustomPolygon";
import CustomStart from "../registerNode/CustomStart";
import CustomEnd from "../registerNode/CustomEnd";
import CustomHtml from "../registerNode/CustomHtml";

const props = defineProps({
  lf: Object
})
onMounted(() => {
  let lf = props.lf;
  lf &&
    lf.on("selection:selected", () => {
      lf.updateEditConfig({
        stopMoveGraph: false,
      });
    });
  registerNode()
})

function registerNode() {
  let lf = props.lf;
  lf.register(CustomRect);
  lf.register(CustomPolygon);
  lf.register(CustomStart);
  lf.register(CustomEnd);
  lf.register(CustomHtml);

  //注册非业务事件，业务事件需要放在上一层
  lf.on("connection:not-allowed", (data) => {
    ElMessage({
      type: "error",
      message: data.msg,
    });
  });

  lf.on("custom:button-click", (model) => {
    console.log('custom:button-click')
    lf.setProperties(model.id, {
      body: "LogicFlow",
    });
  });
}
function openSelection() {
  props.lf.updateEditConfig({
    stopMoveGraph: true,
  });
}
function addStartNode() {
  props.lf.dnd.startDrag({
    type: "CustomStart",
    text: "开始",
    properties: { start: "开始" } //自定义属性，同时导出的文件节点属性上会生成
  });
}
function addGeneralNode() {
  props.lf.dnd.startDrag({
    type: "CustomRect",
    text: "普通节点",
    properties: { CustomRect: "矩形" } //自定义属性，同时导出的文件节点属性上会生成
  });
}
function addConditionNode() {
  props.lf.dnd.startDrag({
    type: "CustomaPolygon",
    text: "条件节点",
  });
}
function addHtmlNode() {
  props.lf.dnd.startDrag({
    type: "CustomHtml",
    text: "",
    properties: { text: "点击修改标题" }
  });
}
function addEndNode() {
  props.lf.dnd.startDrag({
    type: "CustomEnd",
    text: "结束节点",
  });
}
</script>
<style>
.node-panel {
  position: absolute;
  top: 100px;
  left: 10px;
  width: 75px !important;
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 6px;
  text-align: center;
  z-index: 101;
}

.node-item {
  margin-bottom: 10px;
}

.node-item-icon {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  background-size: cover;
}

.node-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
}

.selection {
  background: url() center center no-repeat;
  cursor: grab;
}

.start {
  background: url() center center no-repeat;
  cursor: grab;
}

.end {
  background: url() center center no-repeat;
  cursor: grab;
}

.general {
  background: url() center center no-repeat;
  cursor: grab;
}

.html {
  background: url() center center no-repeat;
  cursor: grab;
}

.condition {
  background: url() center center no-repeat;
  cursor: grab;
}


/*******************纯html格式的样式****************/

.lf-html-wrapper {
  width: 100px;
  height: 100px;
}

.lf-html-wrapper .custom-html {
  width: 96px;
  height: 96px;
  border: 2px solid #2987ff;
}

.lf-html-wrapper .custom-head {
  color: red;
  height: 26px;
  line-height: 26px;
}

.lf-html-wrapper .custom-body {
  color: #2987ff;
  height: 50px;
  line-height: 50px;
}
</style>
